<template>
    <div>
              <el-col :span="4">
                <div class="grid-content bg-purple">
              <el-select v-model="Opvalue" clearable placeholder="请选择" @change="selectChang($event)">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
                </div>
             </el-col>

               <el-col :span="2">
               <div class="grid-content bg-purple">
              <el-button type="info" @click="bottomBtn">确定</el-button>
               </div>
             </el-col>
    </div>
</template>

<script>
import {update_chat_info} from '@/network/allMessage/chat'
export default {
    name:'center',
    //注入reload
    inject:['reload'],
    data(){
        return{
            options: [
            {
              value: "选项删除",
              label: "删除",
            },
          ],
          Opvalue: "删除",
          nowOpvalue:'删除'
        }
    },
    props:{
      all_arr:{
        type:[Array,Object,String]
      }
    },
    methods:{
      selectChang(event){
        switch(event){
          case "选项删除":
            this.nowOpvalue = event
            break
        }
      },
      bottomBtn(){
        switch(this.nowOpvalue){
          case "删除":
            if(this.all_arr.length !== 0){
                this.$confirm('此操作将批量删除, 是否继续?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
              }).then(() => {
                    let nowData ={
                    operation_type:'delete',
                    id:'',
                    }
                    nowData.id = this.all_arr
                    update_chat_info(nowData).then( res => {
                      this.$message({
                        type: 'success',
                        message: '删除成功!'
                      })
                      //console.log(res)
                      this.reload()
                    }).catch( err => {
                      console.log(err)
                    })
              }).catch( () => {
                  this.$message({
                    type: 'info',
                    message: '取消操作!'
                  })
              })
              
            }
            break
        }
      }

    }
}
</script>

<style lang="scss" scoped>
.grid-content {
    text-align: center;
    padding: 10px 0;
}
</style>